<template>
  <qh-page-view :showNavbar="false" bgColor="#fff">
    <view class="fixed-header" :style="headerStyle">
      <uni-status-bar></uni-status-bar>
      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view
            style="width: 100rpx; text-align: center; color: #fff"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon"
            :class="{ 'icon-dark': isScrolled }"
          >
          </view>
        </view>

        <view class="header-title" :class="{ 'text-dark': isScrolled }">
          {{ title }}
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <view class="benner_box benner_footer">
      <view class="grid-container">
        <view
          class="grid-item"
          v-for="(item, index) in foodCategories"
          :key="index"
          @tap="handleItemClick(item)"
        >
          <image :src="item.headerImg" mode="aspectFill" />
        </view>
      </view>

      <view class="giftbox-box">
        <view class="giftbox-category-list">
          <view
            v-for="(category, index) in categories"
            :key="category.id"
            class="giftbox-category-item"
            :class="{ 'giftbox-last': index === categories.length - 1 }"
            @tap="handleItemClick(category, index)"
          >
            <image
              :src="category.headerImg"
              :mode="'aspectFill'"
              class="giftbox-category-img"
            />
            <view class="giftbox-category-text">
              <text class="giftbox-title">{{ category.title }}</text>
              <text class="giftbox-subtitle">{{ category.englishTitle }}</text>
            </view>
          </view>
        </view>
        </view>

    </view>
  </qh-page-view>
</template>

<script>
export default {
  data() {
    return {
      title: "礼盒专区",
      isScrolled: false,
      isTop: true,
      foodCategories: [
        {
          id: 873,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734058624675ba280ade69.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734331249675fcb712bf51.png',
          nameCn: '坚果'
        },
        {
          id: 874,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734058841675ba359a0962.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd1275055.png',
          nameCn: '海鲜礼盒'
        },
        {
          id: 876,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734058938675ba3ba4198e.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897156763bd1362aa8.png',
          nameCn: '南北干货'
        },
        {
          id: 875,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734058978675ba3e2f401b.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd122d822.png',
          nameCn: '五谷杂粮'
        },
        {
          id: 878,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059002675ba3fa68884.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345899546763be0271c35.png',
          nameCn: '厚切牛排'
        },
        {
          id: 877,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059020675ba40c9e947.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897136763bd11dc009.png',
          nameCn: '牛羊生鲜'
        },
        {
          id: 880,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059040675ba420b48c4.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900166763be40d0c9b.png',
          nameCn: '粮油调味'
        },
        {
          id: 879,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059059675ba433d0cc4.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734330823675fc9c7df079.png',
          nameCn: '鸡鸭禽蛋'
        },
        {
          id: 882,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059537675ba6114f279.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900556763be67cc69b.png',
          nameCn: '牛奶奶粉'
        },
        {
          id: 881,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059702675ba6b6dd83e.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900406763be58cc093.png',
          nameCn: '基地直发水果'
        },
        {
          id: 884,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059727675ba6cfcabac.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900906763be8a200ba.png',
          nameCn: '零食糕点'
        },
        {
          id: 883,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735268185676e1759d5318.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735195983676cfd4f66bc8.png',
          nameCn: '酒水饮料'
        },
        {
          id: 886,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059805675ba71d4b46c.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901396763bebb88f99.png',
          nameCn: '预制宴席'
        },
        {
          id: 885,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059821675ba72d7e2d4.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901126763bea07c196.png',
          nameCn: '鲜花饰品'
        },
        {
          id: 889,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059842675ba742d4a47.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902046763befc32b9a.png',
          nameCn: '熟食腊味'
        },
        {
          id: 888,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059859675ba75325326.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902326763bf1845981.png',
          nameCn: '滋补品'
        }
      ],
      categories: [
        {
          id: 887,
          // title: "综合礼盒DIY",
          // englishTitle: "Comprehensive Gift Box DIY",
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734059882675ba76ab074c.png',
          nameCn: '综合礼盒DIY',
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png",

        },
      ],
    };
  },
  computed: {
    headerStyle() {
      return `background-image: ${
        this.isTop
          ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17337434366756d34caea20.png")'
          : "none"
      }`;
    },
    styleColor() {
      return `color: ${this.isTop ? "#fff" : "#000 "}`;
    },
  },
  methods: {
    backHome() {
      uni.navigateBack();
    },
    onPageScroll(e) {
      this.isScrolled = e.scrollTop > 0;
      this.isTop = e.scrollTop === 0;
    },
    handleItemClick(item) {
      // 准备要传递的数据
      const categoryData = {
        id: item.id,
        title: item.nameCn,
        headerImg: item.image // 如果需要传递头部图片
      };
      
      // 将对象转换为URL安全的���符串
      const encodedData = encodeURIComponent(JSON.stringify(categoryData));
      
      // 跳转到gift_box_details页面
      uni.navigateTo({
        url: `/pages/mer/tabbar/specialDetails/gift_box_details?categoryData=${encodedData}`
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.giftbox-box {
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

.giftbox-gift-section {
    max-width: 750rpx;
    margin: 0 auto;
    padding: 20rpx;
    background-color: #fff;
  }
  
  .giftbox-section-title {
    margin-bottom: 20rpx;
  }
  
  .giftbox-title-img {
    width: 100%;
    height: 80rpx; /* 根据实际图片调整高度 */
  }
  
  .giftbox-category-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
  }
  
  .giftbox-category-item {
    position: relative;
    height: 244rpx;
    overflow: hidden;
  }
  
  .giftbox-category-img {
    width: 100%;
    height: 100%;
  }
  
  .giftbox-category-text {
    position: absolute;
    left: 40rpx;
    bottom: 40rpx;
    color: white;
  }
  
  .giftbox-category-text .giftbox-title {
    font-size: 48rpx;
    display: block;
  }
  
  .giftbox-category-text .giftbox-subtitle {
    font-size: 32rpx;
    display: block;
    margin-top: 10rpx;
  }
  
  .giftbox-category-item.giftbox-last {
    height: 244rpx;
  }
  
  .giftbox-view-more {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #666;
  }
  
</style>


<style lang="scss" scoped>
.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-between;
}

.grid-item {
  width: 340rpx;
  height: 244rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
//   border-radius: 8rpx;
  
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .text-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    
    .chinese {
      display: block;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .english {
      display: block;
      color: #fff;
      font-size: 24rpx;
      margin-top: 4rpx;
    }
  }
}
</style>

<style lang="scss" scoped>
.benner_box {
    height: 100vh;
  background-color: #fff;
  position: relative;
  width: 100%;
  margin-top: calc(88rpx + 44px);
  padding-bottom: env(safe-area-inset-bottom);
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: calc(88rpx + 44px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #ffffff;
}

@media screen and (device-width: 375px) and (device-height: 667px),
  screen and (device-width: 414px) and (device-height: 736px),
  screen and (device-width: 360px) and (device-height: 640px) {
  .benner_box {
    margin-top: 88rpx;
    background-color: #fff;
  }
  .benner_footer{
    padding-bottom: env(safe-area-inset-bottom);

  }

  .fixed-header {
    height: 88rpx;
    padding-top: 0;
  }
}
</style>